<template>
  <div class="loading" :style="backgroundStyle">
    <div class="loading_cloud" :style="cloudStyle"></div>
    <div class="loading_progress">
      <div class="progress" v-if="loading.isProgress">
        <div :style="progressStyle"></div>
      </div>
      <div class="progress_count" v-if="loading.isProgress">{{number}}%</div>
      <div class="progress_word">{{loading.content}}</div>
    </div>
  </div>
</template>
<script>
import { mapGetters, mapActions } from "vuex";
export default {
  data() {
    return {
      cloudY: 90,
      number: 0,
      timer: null
    }
  },
  mounted() {
    if (!this.loading.isProgress) this.cloudDirection()
  },
  computed: {
    backgroundStyle() {
      const background = this.loading.isBackground ? "url(" + this.variable.STATICE_URLTITLE + "loading/背景.png" + ")0 0/100% 100%" : "transparent"
      return {
        background: background
      }
    },
    count() {
      return this.loading.progressCount
    },
    cloudStyle() {
      return {
        transform: "translate3d(0," + this.cloudY + "% ,0)"
      }
    },
    progressStyle() {
      const width = this.number / 100 * 19.2
      return {
        width: width + "rem"
      }
    },
    ...mapGetters("mainStatus", {
      loading: "getLoading"
    })
  },
  methods: {
    cloudUp: function () {
      requestAnimationFrame(() => {
        this.cloudY = this.cloudY - 3
        if (this.cloudY <= 0) {
          if (this.loading.router) this.$router.push({ path: "/" + this.loading.router })
          if (this.loading.callback) this.loading.callback()
          this.cloudDown()
          this.setLoading({
            isBackground: false
          })
          return
        }
        this.cloudUp()
      })
    },
    cloudDown: function () {
      requestAnimationFrame(() => {
        this.cloudY = this.cloudY + 3
        if (this.cloudY >= 105) {
          this.setLoading({
            isShow: false
          })
          return
        }
        this.cloudDown()
      })
    },
    cloudDirection: function () {
      this.cloudUp()
    },
    ...mapActions("mainStatus", ["setLoading"]),
  },
  watch: {
    count: function (count) {
      if (count > 0) {
        if (!this.timer) {
          this.timer = setInterval(() => {
            if (this.number === this.count) {
              clearInterval(this.timer)
              this.timer = null
              return
            }
            this.number++
            this.cloudY = this.cloudY - 0.9
          }, 16)
        }
      }
    },
    number: function (count) {
      if (count === 100) {
        clearInterval(this.timer)
        this.timer = null
        if (this.loading.router) this.$router.push({ path: "/" + this.loading.router })
        if (this.loading.callback) this.loading.callback()
        this.setLoading({
          isBackground: false
        })
        this.cloudDown()
      }
    }
  }
};
</script>
<style scoped lang='stylus'>
.loading
  height 100%
  width 100%
  position fixed
  z-index 100
  .loading_cloud
    position absolute
    width 100%
    height 100%
    background url($urlTitle + 'loading/云.png') 0 0 / 100% 100%
  .loading_progress
    position absolute
    $center('WHL_T', 26rem, 5rem, 50%)
    z-index 99
    .progress
      $coord('WHLT', 20rem, 2rem, 0rem, 0.25rem)
      background url($urlTitle + 'loading/进度条-背景.png') 0 0 / 100% 100%
      div
        $coord('WHLT', 19.2rem, 1.25rem, 0.4rem, 0.25rem)
        background url($urlTitle + 'loading/进度条-进度.png') 0 0 / cover
        border-radius 0.8rem
    .progress_count
      $coord('WHRT', 4.8rem, 1.7rem, 0.1rem, 0.3rem)
      background rgb(255, 150, 1)
      border-radius 1.5rem
      box-shadow 1px 2px 0.1rem rgb(240, 194, 127)
      $alignCenter()
      font-size 1rem
      color white
      font-family auto
    .progress_word
      font-size 1.1rem
      margin-top 3rem
      color rgb(255, 150, 1)
</style>

